<template>
  <div id="app">
    <el-container>
      <el-header>
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#333"
          text-color="#fff"
          active-text-color="#ff0000"
        >
          <el-menu-item index="0">
            <i class="el-icon-s-shop"></i>
          </el-menu-item>
          <el-menu-item index="1">产品中心</el-menu-item>
          <el-menu-item index="2">媒体中心</el-menu-item>
          <el-menu-item index="3">关于我们</el-menu-item>
          <el-menu-item index="4">联系我们</el-menu-item>
        </el-menu>
      </el-header>
      <el-main>
        <!-- 跑马灯 -->
        <el-row>
          <template>
            <el-carousel>
              <el-carousel-item v-for="item in 4" :key="item">{{item}}</el-carousel-item>
            </el-carousel>
          </template>
        </el-row>
        <!-- 间隔空行 -->
        <el-row style="height:2rem"></el-row>
        <!-- 产品中心 -->
        <!-- title -->
        <el-row type="flex" justify="center">
          <h1 style="font-family:PingFang SC;font-size:xx-large">产品中心</h1>
        </el-row>
        <!-- product -->
        <el-row type="flex" justify="center">
          <el-row type="flex" justify="space-around" class="hhhh" style="width:80%">
            <el-col :span="12" v-for="item in 4" :key="item" style="padding:20px;">
              <el-card :body-style="{padding:'2rem'}">
                <img
                  src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                  style="background-size: cover;"
                />
                <div style="padding: 14px;font-size:2rem;font-family:PingFang SC;">
                  <span>{{item}}</span>
                  <div class="bottom clearfix">
                    <time class="time">{{ currentDate }}</time>
                    <el-button type="text" class="button">更多</el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-row>

        <!-- 间隔空行 -->
        <el-row style="height:2rem"></el-row>

        <!-- 关于我们 -->
        <div style="display:flex;justify-content:center;margin:100px">
          <el-col :span="24" style="width:80%">
            <el-row>
              <el-col :span="12">
                <el-card>
                  <h1 style="font-family:PingFang SC;font-size:xx-large">公司介绍</h1>
                  <p>四川星科达铸造有限责任公司是一家专业从事流体系统连接件、工地脚手架连接件等产品的高薪技术企业</p>
                  <el-link href="https://element.eleme.io">了解更多</el-link>
                </el-card>
              </el-col>
              <el-col :span="12">
                <img
                  src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                />
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <img
                  src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                />
              </el-col>
              <el-col :span="12">
                <el-card>
                  <h1 style="font-family:PingFang SC;font-size:xx-large">发展沿革</h1>
                  <p>始于2010年，十年专业制造经验</p>
                  <el-link href="https://element.eleme.io">了解更多</el-link>
                </el-card>
              </el-col>
            </el-row>
          </el-col>
        </div>
        <!-- 间隔空行 -->
        <el-row style="height:2rem"></el-row>
        <!-- 媒体中心 -->
        <div>
          <!-- 名称 -->
          <el-row type="flex" justify="center">
            <h1 style="font-family:PingFang SC;font-size:xx-large">媒体中心</h1>
          </el-row>
          <!-- 新闻 -->
          <div v-for="item in 2" :key="item">
            <el-row type="flex" justify="space-between" :body-style="{padding:'2rem'}">
              <el-col :span="18">
                <el-link
                  type="primary"
                  :underline="false"
                  href="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                >
                  <h1>四川星科达铸造有限责任公司获得山西鑫通达管业有限责任公司的投资，整体发展水平迈入新的高度</h1>
                </el-link>
                <p>2020年2月11日上午，眉山市洪雅县县委书记唐局长到集团公司查看新型冠状肺炎疫情防控及以及企业复产复工情况</p>
                <p>11/02/2020</p>
              </el-col>
              <el-col :span="6">
                <img
                  src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                  style="width:200px"
                />
              </el-col>
            </el-row>
          </div>
        </div>
        <!-- 联系我们 -->
        <div style="height:20%;">
          <el-row type="flex" justify="center">
            <h1 style="font-family:PingFang SC;font-size:xx-large">联系我们</h1>
          </el-row>
          <el-row>
            <el-col :span="18">
              <h2>联系方式</h2>
              <el-row>
                <i class="el-icon-phone-outline">13835400456</i>
              </el-row>
              <el-row>
                <i class="el-icon-user"></i>杜经理
              </el-row>
              <el-row>
                <i class="el-icon-discover"></i> 四川省眉山市洪雅县将军乡工业集中区胜科路33号
              </el-row>
            </el-col>
            <el-col :span="6" class="connect">
              <el-button type="primary" round icon="el-icon-s-promotion">留言</el-button>
            </el-col>
          </el-row>
        </div>
      </el-main>
      <el-footer type>
        Copyright@2020
        <el-link href="http://blog.weiye.site">四川星科达铸造有限责任公司</el-link>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      iconUrl: "./assets/logo.png"
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

<style>
.hhhh {
  display: flex;
  flex-wrap: wrap;
}
.connect {
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
